$--xy-color-primary: #23affa;
$--xy-color-warn: #fb880d;
$--xy-color-error: #ff5d5d;
$--xy-color-success: #01aa47;
$--xy-color-deep: #2e2f33;
$--xy-color-deeper: #25262a;
$--xy-color-deepest: #111;
$--xy-color-light: #9e9e9e;
$--xy-color-lighter: #ccc;

$--xy-size-mini: 12px;
$--xy-size-small: 14px;
$--xy-size-normal: 16px;
$--xy-size-big: 18px;
$--xy-size-large: 20px;
$--xy-size-huge: 24px;

$--xy-border-deep: 1px solid #0a0a0a;
$--xy-border-light: 1px solid #f1f1f1;

$--xy-shadow: 0 1px 1px
   rgba(
      $color: rgb(172, 171, 171),
      $alpha: 0.3,
   );

$--xy-shadow-deep: 0 3px 5px
   rgba(
      $color: #cac7c7,
      $alpha: 0.3,
   );

// 弹性居中
@mixin xy-dfc {
   display: flex;
   align-items: center;
   justify-content: center;
}

// 溢出打点 单行
@mixin xy-overpoint {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

// 禁用选中文字
@mixin xy-stopselect {
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   -khtml-user-select: none;
   user-select: none;
}

@mixin xy-card {
   background-color: #fff;
   border-radius: 5px;
   box-shadow: $--xy-shadow;
   overflow: hidden;
   margin: 10px;
   padding: 15px;
}

// 超过三行打点
@mixin xy-overpoint-more {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow: hidden;
}

@mixin xy-placeholder {
   input::-webkit-input-placeholder,
   textarea::-webkit-input-placeholder {
      color: #999 !important;
      font-size: 12px;
   }

   input:-moz-placeholder,
   textarea:-moz-placeholder {
      color: #999 !important;
      font-size: 12px;
   }

   input::-moz-placeholder,
   textarea::-moz-placeholder {
      color: #999 !important;
      font-size: 12px;
   }

   input:-ms-input-placeholder,
   textarea:-ms-input-placeholder {
      color: #999 !important;
      font-size: 12px;
   }
}

// 滚动条不展示
@mixin xy-hide-scroll {
   scrollbar-width: none; /* firefox */
   -ms-overflow-style: none; /* IE 10+ */

   &::-webkit-scrollbar {
      width: 0;
      height: 0;
   }
}

// 特殊滚动条
@mixin xy-scroll {
   &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
   }

   &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(189, 189, 189, 0.6);
   }

   &::-webkit-scrollbar-track {
      /*滚动条里面小方块*/
      border-radius: 10px;
      background: #2e2e33;
   }
}
